<template>
	<view class="klinecharts-view">
		<view class="klinecharts" id="klinecharts"></view>
	</view>
</template>

<script>
	import klinecharts, {
		init,
		dispose
	} from 'klinecharts'

	import zhCN from '@/locales/zh-CN.js'
	import enUS from '@/locales/en-US.js'
	import trCN from '@/locales/tr-CN.js'

	const translate = uni.getStorageSync('locale')
	let lang = ''
	if (translate == 'en-US') {
		lang = enUS
	} else if (translate == 'zh-CN') {
		lang = zhCN
	} else {
		lang = trCN
	}
	klinecharts.registerLocale(translate, lang.klinecharts)
	
	import {
		config
	} from './klineConfig.js'

	export default {
		data() {
			return {
				kline: null,
			};
		},
		props: {
			linkData: {
				type: Array,
				default: () => {
					return []
				}
			},
			lang: {
				type: String,
				default: () => {
					return ''
				}
			}
		},
		watch: {
			linkData: {
				handler(newVal, oldVal) {
					if (this.kline) {
						this.setDispose()
					}
					if (newVal && newVal.length == 0) return
					this.initChart(newVal)
				},
				deep: true,
				immediate: true
			}
		},
		unmounted() {
			this.setDispose()
		},
		methods: {
			initChart(arr) {
				const chart = init('klinecharts', config)
				if (!chart) return
				chart.setLocale(this.lang);
				chart.setStyles({
					candle: {
						// 蜡烛柱
						bar: {
							upColor: "#5EC6A3",
							downColor: "#F0665D",
							noChangeColor: "#888888",
							upBorderColor: "#5EC6A3",
							downBorderColor: "#F0665D",
							noChangeBorderColor: "#888888",
							upWickColor: "#5EC6A3",
							downWickColor: "#F0665D",
							noChangeWickColor: "#888888",
						},
						priceMark: {
							show: false,
						},
						tooltip: {
							showRule: "follow_cross",
							showType: "rect",
						},
					},
				});
				chart.applyNewData(arr)
				this.kline = chart
			},
			setDispose() {
				// 销毁图表
				dispose("klinecharts");
				this.kline = null
			}
		}
	}
</script>
<script module="klinecharts" lang="renderjs" />
<style lang="less" scoped>
	.klinecharts-view {
		height: 100%;
		width: 100%;

		.klinecharts {
			height: 100%;
			width: 100%;
		}
	}
</style>